<template>
  <div class="big-screen">
    <div class="screen_wrap">
      <!-- 头部 -->
      <div class="screen_header"></div>
      <!-- 内容 -->
      <div class="screen_content">
        <div class="screen_content_wrap">
          <!-- 内容上部 -->
          <div class="content_top">
            <!-- 上部左边 -->
            <div class="content_top_left">
              <div class="left_1">
                <LeftContent1 />
              </div>
              <div class="left_2">
                <LeftContent2 />
              </div>
            </div>
            <!-- 上部中间 -->
            <div class="content_top_center">
              <div class="data_center">
                <div class="top_center"></div>
                <div class="top_center"></div>
                <div class="top_center"></div>
              </div>
              <!-- 地图内容 -->
              <MapView />
            </div>
            <!-- 上部右边 -->
            <div class="content_top_right">
              <div class="right_1"></div>
              <div class="right_2">
                <RightContent2 />
              </div>
            </div>
          </div>
          <!-- 内部下部 -->
          <div class="content_bottom">
            <!-- 下部左边 -->
            <div class="content_bottom_left">
              <BottomLeft />
            </div>
            <!-- 下部中间 -->
            <div class="content_bottom_center">
            </div>
            <!-- 下部右边 -->
            <div class="content_bottom_right"></div>
          </div>
        </div>
      </div>
      <!-- 底部 -->
      <div class="screen_footer"></div>
    </div>
  </div>
</template>

<script setup>
import LeftContent1 from "./LeftContent1.vue";
import LeftContent2 from "./LeftContent2.vue";
import RightContent2 from './RightContent2.vue';
import BottomLeft from './BottomContent.vue';
import MapView from './MapView.vue'
</script>

<style lang="less" scoped>
.big-screen {
  // 100%:可视窗口分为等分进行设置1%等于1vw
  width: 100vw;
  height: 100vh;
  // background-color: red;
  background: url("@/assets/images/bg.jpg") no-repeat;
  background-size: 100% 100%;

  .screen_wrap {
    width: 100%;
    height: 100%;
    color: #fff;
  }

  .screen_header {
    width: 100%;
    height: 1.4271rem;
    background: url("@/assets/images/header.png") no-repeat center top;
    background-size: 100% 100%;
  }

  .screen_content {
    width: 100%;
    // margin
    // 11.25rem
    height: calc(11.25rem - 1.4271rem - 0.4479rem);
    // background-color: rgba(0, 0, 255, 0.363);
    display: flex;
    justify-content: center;
    align-items: center;

    .screen_content_wrap {
      width: 18.75rem;
      height: 100%;
      position: relative;

      //   background-color: rgba(255, 217, 0, 0.363);
      .content_top {
        width: 100%;
        height: 6.4583rem;
        display: flex;
        justify-content: space-between;
        position: absolute;
        top: -0.6771rem;
        left: 0;

        .content_top_left {
          width: 4.6458rem;
          height: 100%;

          // background-color: rgba(255, 217, 0, 0.363);
          .left_1 {
            width: 4.5833rem;
            height: 1.5625rem;
            border: 0.1042rem solid transparent;
            border-image-source: url("@/assets/images/border_1.png");
            border-image-width: 0.4792rem 0.2917rem 0.3438rem 2.5625rem;
            border-image-slice: 46 28 33 246;
            // IE盒子模型
            box-sizing: border-box;
            // 定位
            position: relative;
          }

          .left_2 {
            width: 4.5833rem;
            height: 4.2708rem;
            // IE盒子模型
            box-sizing: border-box;
            border: 0.1042rem solid transparent;
            border-image-source: url("@/assets/images/border_2.png");
            border-image-width: 1.25rem 0.2083rem 1.9792rem 2.1354rem;
            border-image-slice: 120 20 190 205;
            margin-top: .4167rem;
            // 定位
            position: relative;
          }
        }

        .content_top_center {
          width: 9.1146rem;
          height: 100%;
          // background-color: rgba(255, 217, 0, 0.363);
          position: relative;

          .data_center {
            width: 6.4583rem;
            height: 1.0417rem;
            // background-color: red;
            margin-top: .3646rem;
            display: flex;
            justify-content: space-between;
            position: relative;
            z-index: 99;

            .top_center {
              width: 1.9792rem;
              height: 100%;
              // IE盒子模型
              box-sizing: border-box;
              border: 0.1042rem solid transparent;
              border-image-source: url("@/assets/images/center_1.png");
              border-image-width: .3125rem .4167rem .5rem .1563rem;
              border-image-slice: 30 40 48 15;
            }
          }


        }

        .content_top_right {
          width: 4.4792rem;
          height: 100%;
          // background-color: rgba(255, 217, 0, 0.363);

          .right_1 {
            width: 100%;
            height: 3.6458rem;
            // IE盒子模型
            box-sizing: border-box;
            border: 0.1042rem solid transparent;
            border-image-source: url("@/assets/images/border_1.png");
            border-image-width: 0.4792rem 0.2917rem 0.3438rem 2.5625rem;
            border-image-slice: 46 28 33 246;
          }

          .right_2 {
            width: 100%;
            height: 2.6042rem;
            // IE盒子模型
            box-sizing: border-box;
            border: 0.1042rem solid transparent;
            border-image-source: url("@/assets/images/border_3.png");
            border-image-width: .9375rem .2604rem .2604rem 2.6563rem;
            border-image-slice: 90 25 25 255;
            margin-top: .2083rem;
          }
        }
      }

      .content_bottom {
        width: 100%;
        height: 3.4375rem;
        // background-color: rgba(255, 60, 0, 0.175);
        position: absolute;
        bottom: 0;
        left: 0;
        display: flex;
        justify-content: space-between;

        .content_bottom_left {
          width: 4.6458rem;
          height: 100%;
          // background-color: rgba(45, 196, 121, 0.332);
          // IE盒子模型
          box-sizing: border-box;
          border: 0.1042rem solid transparent;
          border-image-source: url("@/assets/images/border_3.png");
          border-image-width: .9375rem .2604rem .2604rem 2.6563rem;
          border-image-slice: 90 25 25 255;
        }

        .content_bottom_center,
        .content_bottom_right {
          width: 6.7708rem;
          height: 100%;
          // background-color: rgba(45, 196, 121, 0.332);
          // IE盒子模型
          box-sizing: border-box;
          border: 0.1042rem solid transparent;
          border-image-source: url("@/assets/images/border_4.png");
          border-image-width: .9896rem 2.6042rem .8125rem 2.3958rem;
          border-image-slice: 95 250 78 230;
        }
      }
    }
  }

  .screen_footer {
    width: 100%;
    height: 0.4479rem;
    background: url("@/assets/images/bottom.png") no-repeat center top;
    background-size: 100% 100%;
  }
}
</style>
